<!--  -->
<template>
  <div :class="color">
    <b-card tag="article"
        :img-src="source"
        :class="['text-center', isOn?'on':'']"
        @mouseover="change"
        @mouseout="change">
      <p class="card-text ft14">
        {{type}}
      </p>
      <h2>￥ {{price}}/月起</h2>
      <router-link to="" class="btn">{{btnText}}</router-link>
    </b-card>
  </div>
</template>

<script>
export default {
  props: {
    price: {
      type: String
    },
    type: {
      type: String
    },
    'btn-text': {
      type: String
    },
    source: {
      type: String
    },
    color: {
      type: String
    }
  },

  data () {
    return {
      isOn: false
    }
  },

  computed: {},

  methods: {
    change: function () {
      this.isOn = !this.isOn
    }
  }
}
</script>
<style lang='less' scoped>
  .set-color(@color) {
    .card {
      .bd-top(@color, 3px);
    }
    h2 {
      color: @color;
    }
    .btn {
      background: @color;
    }
  }

  .blue {
    .set-color(#48d3f8)
  }
  .yellow {
    .set-color(#fb8f30)
  }
  .red {
    .set-color(#d72026)
  }
  .green {
    .set-color(#28d32f)
  }
  .card {
    box-shadow: 0 5px 5px #D5D5D5;
    cursor: pointer;
    padding: 2rem 0;
    transition:@default-trans;
    &.on {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      box-shadow: 0 10px 10px #ddd;
    }
  }
  h2 {
    margin-bottom: 1.5rem;
  }
  .card-img {
    width: 30%;
    margin: auto;
    margin-top: 1rem;
  }
  .btn {
    .block;
    .white;
    width: 90%;
    margin: 0 auto;
  }
</style>
